<template>
  <div class="container">
    <div class="loginBox">
      <el-row>
        <el-col :xs=24 :sm=24>
          <el-form  label-width="0px" :model="login">
            <el-form-item >
              <el-input v-model="login.userName" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item >
              <el-input v-model="login.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button type="submit"
              @click="logins"
              :disabled="disabled">{{loginIn}}</el-button>
              <div class="register"><span>忘记密码</span><span>注册</span></div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {login} from '@/api/user.js'
export default {
  data () {
    return {
      login: {
        userName: '',
        password: ''
      },
      loginIn: '登录',
      disabled: false,
      loading: true
    }
  },
  methods: {
    logins () {
      this.disabled = true
      this.loginIn = '登录中...'
      login({
        userName: this.login.userName,
        password: this.login.password
      }).then(res => {
        this.disabled = false
        this.loginIn = '登录'
        if (res.data.code === 200) {
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.$router.push({path: '/'})
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      }).catch(error => {
        this.loginIn = '登录'
        this.disabled = false
        console.log(error)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.container>>> .el-input__inner{
  background-color transparent;
  color #fff
}
.container {
  color #fff
  width: 100%;
  height: 100vh;
  background: url('~@/assets/images/index/77.jpg') center no-repeat;
  background-size: cover;
  .loginBox{
    background-color rgba(0,0,0,.5)
    padding 22px 22px 0 22px
    border-radius 10px;
    box-sizing border-box
    width 30%
    position relative;
    left 35%;
    top 30%
    .el-button{
      width 100%
    }
    .register{
      display flex
      justify-content flex-end
      span{
        padding 0 5px;
      }
    }
  }
}

</style>
